<template>
  <el-dialog
    :visible.sync="visible"
    :title="$t('mike.feedback_detail')"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="dataForm"
      v-loading="loading"
      :model="model"
      label-position="top"
    >
      <el-form-item
        :label="$t('mike.sn8')"
        prop="sn8">
        <el-input
          v-model="model.sn8"
          :disabled="true"/>
      </el-form-item>

      <el-form-item
        :label="$t('user.mobile')"
        prop="phone">
        <el-input
          v-model="model.phone"
          :disabled="true"/>
      </el-form-item>
      <el-form-item
        :label="$t('model.createTime')"
        prop="createTime">
        <el-input
          v-model="model.createTime"
          :disabled="true"/>
      </el-form-item>
      <el-form-item
        :label="$t('mike.img')"
        prop="url">
        <midea-admin-image
          :height="200"
          :previewable="true"
          :url="model.url"
          :width="200"
          v-if="model.url && model.url.length > 0"
        />

        <p v-if="!model.url || model.url.length<=0">用户未上传图片</p>
      </el-form-item>
      <el-form-item
        :label="$t('news.content')"
        prop="feedBack">
        <div class="feed-back-detail">
          {{ model.feedBack }}
        </div>
      </el-form-item>
    </el-form>

    <template
      slot="footer"
      v-if="!loading">
      <el-button
        :loading="requesting"
        @click="close()"
        type="primary"
      >{{ $t("confirm") }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import commonMixin from '@/mixins/common'
export default {
  mixins: [commonMixin],
  name: 'MikeFeedbackDetail',
  data () {
    return {
      loading: false,
      visible: false,
      model: {},
      feedbackId: ''
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.loadData()
      })
    },
    close () {
      this.visible = false
    },
    loadData () {
      if (!this.feedbackId || this.feedbackId.length <= 0) {
        return
      }

      if (this.loading) {
        return
      }
      this.loading = true
      let apiUrl = this.getApiUrl(
        `/midea/menu/feedback/get/${this.feedbackId}`,
        true
      )

      this.$http
        .post(apiUrl)
        .then(({ data: res }) => {
          this.model = res.data
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped lang="scss">
.feed-back-detail {
  padding: 15px 30px;
  border-radius: 15px;
  border: 1px solid #eeeeee;
  min-height: 20vh;
  font-size: 16px;
  word-wrap: break-word;
  word-break: break-word;
}
</style>
